<template>
  <view class="order_create">
    <!-- <uv-navbar autoBack placeholder leftIconColor="#fff" bg-color="transparent" title="商城"></uv-navbar> -->
    <scroll-view
      :scroll-with-animation="true"
      class="info_top bgf9"
      @scroll="scroll_go"
      scroll-x="false"
      scroll-y="true"
      :scroll-top="scrollTop"
      :show-scrollbar="false"
    >
      <view class="create_address" @click="toAddressList">
        <view class="left">
          <uv-image src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/shop/icon_dz.png" width="30px" height="30px" />
          <view class="left_text" v-if="!form.province">
            <view class="font16333">请添加详细收货地址</view>
            <view class="font14999">请填写收货信息</view>
          </view>
          <view class="shengshiqu" v-else>
            <view class="right_text font16333">
              {{ form.province }} {{ form.city }} {{ form.area }}
              {{ form.detail_address }}
            </view>
            <view class="name font14999">
              <text class="n">{{ form.name }}</text>
              <text class="p">{{ splitPhone(form.phone) }}</text>
            </view>
          </view>
        </view>
        <uv-icon name="arrow-right"></uv-icon>
      </view>
      <view class="create_address2">
        <view class="address2_info">
          <!-- <view class="item" v-for="(item, index) in goods_list"> -->
          <view class="item">
            <uv-image
              radius="10px"
              :src="info.thumb"
              width="80px"
              height="80px"
            ></uv-image>
            <view class="item_right">
              <view class="name font14333">{{ info.name }}</view>
              <view class="discount_all priceFont">
                <view>￥{{ info?.specs?.price_format }}</view>
                <uv-number-box
                  bgColor="#f9f9f9"
                  :max="info.specs.stock"
                  v-model="info.specs.num"
                ></uv-number-box>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="create_address2" style="padding: 0 40rpx">
        <view class="address2_title font14333">订单备注</view>
        <view class="address2_mark">
          <textarea
            v-model="remark"
            @input="markInput"
            maxlength="200"
            placeholder="请输入备注内容"
            class="mark"
            placeholder-style="font-size:30rpx;"
          ></textarea>
        </view>
      </view>
    </scroll-view>
    <view class="info_bottom">
      <view class="shouye">
        <view class="font14999"> 总价： </view>
        <view class="priceFontB">￥{{ totalPrice }}</view>
      </view>
      <!-- <view @click="order_create()" class="goumai"> -->
      <uv-button
        :disabled="!form.id"
        @click="order_create_action()"
        :loading="loading"
        shape="circle "
        class="smb"
        type="primary"
        text="确定下单"
        color="#FF4949"
      ></uv-button>
    </view>
  </view>
</template>

<script>
import { pxtoRpx } from "@/utils/shopUtils/index";
import useOrder from "@/store/order";
import { storeToRefs } from "pinia";

const orderData = useOrder();
const { order } = storeToRefs(orderData);
import { shopApiOrder } from "@/api/shopApi/index";
export default {
  components: {
    // EvanIcons,
  },
  data() {
    return {
      c_width: uni.getSystemInfoSync().windowWidth,
      c_height: uni.getSystemInfoSync().windowHeight,
      image_height: 0,
      discount_all: 0,
      scrollTop: 0,
      back_to_top: false,
      address: null,
      mark_count: 0,
      info: {},
      form: {
        id: "",
        province: "",
        city: "",
        area: "",
        detail_address: "",
        name: "",
        phone: "",
      },
      remark: "",
      loading: false,
    };
  },
  computed: {
    totalPrice() {
      return this.info.specs.price_format * this.info.specs.num;
    },
  },
  onLoad(option) {
    console.log(this.info, "1");

    this.info = order.value.orderInfo;
    this.form = order.value.addressInfo; //当前地址
    const width = pxtoRpx(this.c_width);
    this.image_height = width * 0.92 * 0.2;
  },

  onShow() {
    this.loading = false;
    for (var i = 0; i < this.address_list?.length; i++) {
      if (this.address_list[i].moren == 1) {
        this.address_index = i;
        this.address = this.address_list[this.address_index];
        break;
      }
    }

    this.num_all();
  },
  methods: {
    splitPhone(phone) {
      const start = phone.substring(0, 3); // 获取前三位可见部分
      const end = phone.substring(7); // 获取后四位可见部分
      return start + "****" + end;
    },
    async order_create_action() {
      if (!this.form.id && this.info.specs.code) return;
      this.loading = true;
      const param = {
        address_id: this.form.id,
        product_uuid: this.info.uuid,
        sku_code: this.info?.specs?.code,
        num: this.info?.specs?.num,
      };
      if (!!this.remark) {
        param.remark = this.remark;
      }
      const { data } = await shopApiOrder(param);
      if (data.error_code === 0) {
        uni.navigateTo({
          url: `/pages/shop/index/order_pay?order_id=${data?.data?.out_trade_no}&count=${this.totalPrice}`,
        });
      } else {
        uni.showToast({
          title: data.errors || "err",
          icon: "none",
        });
      }
    },
    address_select(index) {
      if (index == this.address_index) {
        this.address_index = -1;
      } else {
        this.address_index = index;
      }

      if (this.address_index > -1) {
        this.address = this.address_list[this.address_index];
      } else {
        this.address = null;
      }
    },

    num_all() {
      this.discount_all = 0;
      for (var j = 0; j < this.goods_list?.length; j++) {
        var obj = this.goods_list[j];
        this.discount_all += parseFloat(obj.discount) * obj.num;
      }
    },
    markInput(e) {
      console.log(e);
      this.mark_count = e.detail.value?.length;
    },
    click_back_to_top() {
      this.scrollTop = 0;
    },
    scroll_go(event) {
      this.scrollTop = event.detail.scrollTop;
      if (parseInt(event.detail.scrollTop) > 400) {
        this.back_to_top = true;
      } else {
        this.back_to_top = false;
      }
    },

    toAddressList() {
      const info = encodeURIComponent(JSON.stringify(this.info));
      uni.navigateTo({
        url: `/pages/shop/user/address_list?info=${info}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f9f9f9;
  padding-top: 20px;
}

.order_create {
  width: 92%;
  padding: 0 4%;
}

.discount_all {
  display: flex;
  justify-content: space-between;
}

.info_bottom {
  font-size: 26rpx;
  width: 92%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150rpx;
  border-radius: 20px 20px 0px 0px;
  background: #fff;
  padding: 0 4%;
}

.info_bottom .shouye {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
}

.info_bottom .shouye .dis {
  font-size: 20px;
  font-weight: 700;
  color: #92ffec;
}

.info_bottom .smb {
  width: 110px;
  height: 40px;
  border-radius: 20px;
}

.info_bottom .goumai:active {
  background: #f30;
}

.shengshiqu {
  color: #999;
  overflow: hidden;
  width: 70%;

  .right_text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-top: 6rpx;
  }

  .p,
  .n {
    margin-top: 6rpx;
  }

  .p {
    margin-left: 20rpx;
  }
}

.create_address {
  position: relative;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .evan-icons {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
  }
}

.create_address .left {
  display: flex;
  align-items: center;

  .shengshiqu,
  .left_text {
    padding-left: 20rpx;
  }
}

.left_text {
  padding: 0 40rpx;
}

.no_address {
  height: 100rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.has_address {
  padding: 20rpx 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
}

.create_address2 {
  // width: 100%;
  border-radius: 20rpx;
  background: #fff;
  margin: 40rpx 0;
  padding: 40rpx;
}

.address2_title {
  height: 100rpx;
  line-height: 100rpx;
  font-size: 28rpx;
}

.address2_mark .mark {
  height: 200rpx;
  // border: solid 1rpx #ddd;
  border-radius: 10rpx;
  width: 100%;
}

.address2_info {
  width: 100%;
}

.address2_info .item {
  margin-bottom: 20rpx;
  display: flex;
}

.address2_info .item image {
  width: 100%;
  border-radius: 10rpx;
}

.address2_info .item .num {
  color: #06f;
  width: 10%;
}

.item_right {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  padding: 0 10px;
}

.address_panel {
  width: 100%;
}

.address_item {
  width: 92%;
  padding: 0 4%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1rpx solid #ddd;
}

.address_item:active {
  background: #eee;
}

.address_item .left {
  width: 20%;
  padding: 20rpx 0;
  height: 50rpx;
  text-align: center;
}

.address_item .right {
  width: 80%;
  padding: 20rpx 0;
  line-height: 50rpx;
  color: #999;
}

.address_item .right .na {
  color: #000;
  font-weight: bold;
}
</style>
